<template>
<div class="video">
  <!-- 视频+选集+评论部分 -->
  <!-- 视频部分 -->
  <div class="video-title">
    <span>{{currentEpisodeDetails.bangumi_name}}</span>
  </div>
  <div class="video-content">
    <!-- 上部分显示视频名称 -->
    <div class="video-content-episode-title">
      <p>{{currentEpisodeDetails.episode_num}} - {{currentEpisodeDetails.episode_name}}</p>
    </div>
    <!-- 播放视频部分 -->
    <video class="yukino-content-player" :src="currentEpisodeDetails.episode_index" controls="controls"></video>
  </div>

  <el-divider></el-divider>

  <!-- 番剧详情 -->
  <div class="video-select">
    <!-- 番剧封面 -->
    <div class="video-pic">
      <el-image :src="currentEpisodeDetails.bangumi_img" style="width: 134px; height: 179px;"></el-image>
    </div>
    <!-- 番剧详细 -->
    <div class="video-details">
      <!-- 番剧标题 -->
      <span class="video-details-title">{{currentEpisodeDetails.bangumi_name}}</span>
      <!-- 番剧选集 -->
      <div class="video-select-episode">
        <div class="episode-button"
          v-for="(item, index) of currentEpisodeDetails.bangumi_episode" :key="index"
          @click="goToEpisode(item)">{{item}}</div>
      </div>
    </div>
  </div>

  <el-divider></el-divider>

  <!-- 评论部分 -->
  <div class="video-comment">
    <span class="video-comment-title">评论</span>
    <div class="video-comment-sort">
      <span class="video-comment-sort-type"
        v-for="(item, index) in commentSortList" :key="index"
        :class="{ 'sort-type-select': item.value == commentSortType }"
        @click="selectSortType(item.value)">{{item.label}}</span>
    </div>
    <el-divider class="video-comment-line"></el-divider>
    <!-- 发布评论 -->
    <div class="video-comment-self">
      <!-- 左侧是头像 -->
      <div class="video-comment-avatar">
        <el-avatar :src="circleUrl"></el-avatar>
      </div>
      <!-- 中间是文本框 -->
      <el-input type="textarea" :rows="3" resize="none"
        placeholder="注意言辞哦" v-model="yourComment"></el-input>
      <!-- 右侧是发布评论按钮 -->
      <div class="video-comment-post-button">
        发表评论
      </div>
    </div>
    <!-- 所有评论 -->
    <div class="video-comment-list" v-if="haveComment">
      <div class="video-comment-item" v-for="(item, index) in currentCommentDetails" :key="index">
        <!-- 头像 -->
        <a class="user-icon">
          <el-avatar :src="circleUrl"></el-avatar>
        </a>
        <div class="comment-item-components">
          <!-- 名称 -->
          <span class="comment-nickname">{{item.comment_username}}</span>
          <!-- 评论正文 -->
          <p class="comment-content">{{item.comment}}</p>
          <!-- 点赞/踩 信息 -->
          <div class="comment-info">
            <!-- 发布时间 -->
            <span class="comment-date">{{item.comment_date}}</span>
            <!-- 喜欢 -->
            <div class="like" @click="likeOrDislike(item, 'like')">
              <i class="iconfont icon-good"></i>
              <span>{{item.good_count}}</span>
            </div>
            <!-- 不喜欢 -->
            <div class="dislike" @click="likeOrDislike(item, 'dislike')">
              <i class="iconfont icon-bad"></i>
              <span>{{item.bad_count}}</span>
            </div>
            <!-- 打开回复列表 -->
            <span class="show-reply" @click="toggleReplyList(item);">回复列表</span>
            <!-- 回复按钮 -->
            <span class="reply" @click="toggleIsReply(item)">回复</span>
          </div>
          <!-- 回复列表 -->
          <!-- 发表回复 -->
          <div class="video-comment-self" :class="{'is-hide': !item.isReply}">
            <!-- 左侧是头像 -->
            <div class="video-comment-avatar">
              <el-avatar :src="circleUrl"></el-avatar>
            </div>
            <!-- 中间是文本框 -->
            <el-input type="textarea" :rows="3" resize="none"
              placeholder="注意言辞哦" v-model="yourComment"></el-input>
            <!-- 右侧是发布评论按钮 -->
            <div class="video-comment-post-button">
              发表评论
            </div>
          </div>
          <!-- ================= -->
          <!-- 回复列表 -->
          <div class="reply-container" style="display: none">
            <div class="reply-item">
              <!-- 头像 -->
              <a class="reply-icon">
                <el-avatar :src="circleUrl"></el-avatar>
              </a>
              <div class="reply-container">
                <div class="reply-user">
                  <a class="reply-nickname">myName</a>
                  <span class="reply-content">myContent</span>
                </div>
                <!-- 点赞/踩 信息 -->
                <div class="comment-info">
                  <!-- 发布时间 -->
                  <span class="comment-date">{{item.comment_date}}</span>
                  <!-- 喜欢 -->
                  <div class="like">
                    <i class="iconfont icon-good"></i>
                    <span>{{item.good_count}}</span>
                  </div>
                  <!-- 不喜欢 -->
                  <div class="dislike">
                    <i class="iconfont icon-bad"></i>
                    <span>{{item.bad_count}}</span>
                  </div>
                  <!-- 打开回复列表 -->
                  <span class="show-reply" @click="toggleReplyList(item);">回复列表</span>
                  <!-- 回复按钮 -->
                  <span class="reply" @click="toggleIsReply(item)">回复</span>
                </div>
              </div>
            </div>
          </div>
          <!-- ================================== -->
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: 'yukinoVideo',
  data () {
    return {
      // 当前剧集是否有评论
      haveComment: false,
      // 当前剧集评论
      currentCommentDetails: null,
      // 当前剧集详细
      currentEpisodeDetails: {
        // 当前剧集id
        episode_id: '',
        // 番剧id
        bangumi_id: '',
        // 番剧名称
        bangumi_name: '',
        // 番剧封面
        bangumi_img: '',
        // 番剧集数
        bangumi_episode: '',
        // 当前剧集数
        episode_num: '',
        // 当前剧集名称
        episode_name: '',
        // 视频地址
        episode_index: '',
      },
      // 评论排序选择
      commentSortType: 'heat',
      // 评论排序列表
      commentSortList: [
        {
          label: '按热度排序',
          value: 'heat'
        },
        {
          label: '按时间排序',
          value: 'time'
        }
      ],
      // 默认头像
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      // 你的评论
      yourComment: '',
      // 你的回复
      yourReply: '',
    }
  },
  methods: {
    // 获取当前番剧详细
    // 需获取内容
    // 番剧名、总剧集数、当前集数、当前集名称
    getCurrentMsg () {
      let _this = this;
      let season = this.$router.currentRoute.params.season;
      let episode = this.$router.currentRoute.params.episode;
      season = season.split("md")[1];
      episode = episode.split("ep")[1];
      // 获取当前集数
      this.$axios.post("/api/getCurrentEpisode.php", this.$qs.stringify({
        // 当前季度
        bangumi_id: season,
        // 当前集数
        episode_id: episode
      })).then((res)=> {
        // episode_id
        let episode_id = res.data[0].episode_id;
        // bangumi_name
        let bangumi_name = res.data[0].bangumi_name;
        // episode_index
        let episode_index = res.data[0].episode_index;
        // bangumi_id
        let bangumi_id = res.data[0].bangumi_id;
        // episode_num
        let episode_num = res.data[0].episode_num;
        // 将数据保存在 currentEpisodeDetails 中
        _this.currentEpisodeDetails = res.data[0];
        // 总集数转为Int类型
        _this.currentEpisodeDetails.bangumi_episode = parseInt(_this.currentEpisodeDetails.bangumi_episode);
        // 修改 index 地址
        _this.currentEpisodeDetails.episode_index = "http://localhost:80/yukino_mov/bangumi/" + bangumi_name + "/" + episode_index;
        // 修改 img 地址
        _this.currentEpisodeDetails.bangumi_img = "http://localhost:80/yukino_img/" + _this.currentEpisodeDetails.bangumi_img;
      }).
      // 获取评论
      then(()=>{
        this.$axios.post("/api/getCommentList.php", this.$qs.stringify({
          video_id: _this.currentEpisodeDetails.episode_id,
          video_type: 'bangumi',
        })).then((res) => {
          if(res.data.data != 0) {
            _this.currentCommentDetails = res.data;
            for(let i=0; i < _this.currentCommentDetails.length; i++) {
              this.$set(this.currentCommentDetails[i], 'isReply', false);
            }
            _this.haveComment = true;
          }
        })
      }).
      // 用户是否点过赞（未完成）
      then(()=>{
        // 获取用户名
        let userData = JSON.parse(window.sessionStorage.getItem("User"));
        let username = userData.username;
        // 获取视频id
        let video_id = this.currentEpisodeDetails.episode_id;
        // 获取视频类型
        let video_type;
        let currentUrl = this.$router.currentRoute.path;
        currentUrl = currentUrl.split("/");
        // 判断视频类型 md => 番剧 / video => 视频
        if(currentUrl[2].search("md") == 0) {
          video_type = "bangumi";
        }else {
          video_type = "video";
        }
        this.$axios.post("/api/getUserExpression.php", this.$qs.stringify({
          username,
          video_id,
          video_type
        })).then((res)=>{
          console.log(res);
        })
      })
    },
    // 修改评论排序方式
    selectSortType(type) {
      this.commentSortType = type;
    },
    // 跳转选中剧集
    goToEpisode (episode) {
      this.$router.push("/play/md" + this.currentEpisodeDetails.bangumi_id + "/ep" + episode);
    },
    toggleIsReply (item) {
      // 如果点击的是新的回复
      if(!item.isReply) {
        // 将之前的回复框取消掉
        for(var i = 0; i < this.currentCommentDetails.length; i++) {
          this.$set(this.currentCommentDetails[i], 'isReply', false);
        }
      }
      item.isReply = !item.isReply;

    },
    toggleReplyList(item) {
      console.log(item.comment_id);
    },
    // 点赞信息
    likeOrDislike(item, isLikeTag) {
      // 需传递数据：评论id、用户名、当前点赞数量/当前点踩数量
      // 获取评论id
      let comment_id = item.comment_id;
      // 获取用户id
      let userData = JSON.parse(window.sessionStorage.getItem("User"));
      let username = userData.username;
      // 获取点赞数量
      let like = item.like;
      // 获取点踩数量
      let dislike = item.dislike;
      // 获取当前用户操作（点赞/点踩）  (isLike == 1) => like / (isLike == 0) => dislike
      let isLike;
      if(isLikeTag == 'like') {
        isLike = 1;
      }else if (isLikeTag == 'dislike') {
        isLike = 0;
      }
      this.$axios.post("/api/setLike.php", this.$qs.stringify({
        comment_id,
        username,
        like,
        dislike,
        isLike
      })).then((res)=>{});
    }
  },
  created() {
    this.getCurrentMsg();
  },
}
</script>
<style scoped>
/* 整个页面 */
.video {
  width: 60%;
  min-width: 638px;
  height: 450px;
  margin: 0 auto;
}
/* 番剧标题 */
.video-title {
  font-size: 20px;
  padding: 20px 0 10px 20px;
}
/* 视频部分 */
.video-content {
  position: relative;
  width: 100%;
  min-width: 648px;
  overflow: hidden;
}
/* 视频标题 */
.video-content-episode-title {
  width: 100%;
  padding: 10px 0;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(rgb(43, 43, 43), transparent);
  position: absolute;
  top: -52px;
  transition: 0.5s ease;
}
.video-content:hover .video-content-episode-title {
  top: 0;
}
/* 视频窗口 */
.yukino-content-player {
  width: 100%;
  min-width: 648px;
}
/* 剧集选择 */
.video-select {
  height: 179px;
}
/* 番剧封面 */
.video-pic {
  position: relative;
  display: block;
  float: left;
  width: 134px;
  height: 179px;
  z-index: 2;
  border-radius: 2px;
  overflow: hidden;
  background-color: #f4f5f7;
}
/* 番剧右侧详细信息 */
.video-details {
  position: relative;
  padding-left: 150px;
  height: 100%;
  z-index: 1;
}
/* 番剧标题 */
.video-details-title {
  margin-left: 6px;
  font-size: 20px;
  font-weight: 600
}
/* 集数挑选 */
.video-select-episode {
  height: 16px;
  margin-top: 60px;
  font-size: 12px;
  color: #212121;
}
/* 集数按钮 */
.episode-button {
  cursor: pointer;
  width: 50px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid #DCDFE6;
  text-align: center;
  line-height: 30px;
  color: #687391;
  font-weight: 600;
  float:left;
  margin: 4px 6px;
}
.episode-button:hover {
  color: #fff;
  background: #687391;
}
/* 评论部分 */
.video-comment-title {
  display: block;
  /* padding: 0 0 20px 0; */
  font-size: 20px;
  height: 50px;
  line-height: 50px;
}
/* 评论默认样式 */
.video-comment-sort-type {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  cursor: pointer;
}
.video-comment-sort-type:first-child {
  margin-right: 32px;
}
.video-comment-sort-heat {
  margin-right: 32px;
}
/* 选中样式 */
.sort-type-select {
  color: #269cc8;
  border-bottom: 1px solid #269cc8;
}
/* 分隔符样式 */
.video-comment-line {
  margin-top: 0;
}
/* 个人评论部分 */
.video-comment-self, .reply-area-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 30px;
  width: 100%;
}
.video-comment-avatar {
  width: 48px;
  height: 48px;
}
.el-avatar {
  width: 100%;
  height: 100%;
}
/* 评论框 */
.el-textarea {
  width: calc(100% - 172px);
}
.el-textarea:hover>>>.el-textarea__inner {
  border: 1px solid #269cc8;
}
.video-comment-post-button {
  cursor: pointer;
  background: #269cc8;
  color: #fff;
  padding: 19px 20px;
  border-radius: 4px;
  width: 40px;
  text-align: center;
  font-size: 15px;
  display: inline-block;
}
.video-comment-post-button:hover {
  background: #36abd8;
}

.user-icon {
  float: left;
  margin: 24px 0 0 5px;
  position: relative;
  width: 48px;
  height: 48px;
}
.comment-item-components {
  position: relative;
  margin-left: 75px;
  padding: 22px 0 14px;
  border-top: 1px solid #e5e9ef;
}
.comment-nickname {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  padding-bottom: 4px;
  display: block;
  word-wrap: break-word;
  position: relative;
}
.comment-content {
  text-indent: 0;
  line-height: 20px;
  padding: 2px 0;
  font-size: 14px;
  text-shadow: none;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
.comment-info {
  color: #99a2aa;
  line-height: 26px;
  font-size: 12px;
}
.comment-info .like, .dislike, .reply, .show-reply {
  cursor: pointer;
}
.comment-info .like:hover, .dislike:hover, .reply:hover, .show-reply:hover {
  color: #269cc8;
}
.comment-date {
  margin-right: 20px;
}
.like {
  display: inline-block;
  margin-right: 20px;
}
.dislike {
  display: inline-block;
  margin-right: 20px;
}
.show-reply {
  display:inline-block;
  margin-right: 20px;
}
.reply {
  display: inline-block;
}
.comment-reply {
  box-sizing: content-box;
}
/* 回复部分 */
.reply-icon {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  vertical-align: top;
  width: 30px;
  height: 30px;
}
.reply-container {
  display: inline-block;
  width: calc(100% - 40px);
}
.reply-nickname {
  font-size: 12px;
  font-weight: 700;
  margin-right: 20px;
}
.reply-content {
  font-size: 14px;
  line-height: 20px;
  white-space: pre-wrap;
}
/* 隐藏回复框 */
.is-hide {
  display: none !important;
}
</style>